<template>
    <div class="splitOrder">
        <div class="splitOrder-container">
            <div class="splitOrder-container-top">
                <div class="top-left">
                    <div class="top-left-title">桌台：{{ tableInfo.roomName }}</div>
                    <div class="top-left-value">单号：{{ tableInfo.consumeCode }}</div>
                    <div class="top-left-value">开台时间：{{ valiTime(tableInfo.startTime) }}</div>
                </div>
                <div class="top-right" @click="router.back()">关闭</div>
            </div>
            <div class="splitOrder-container-nav" >
                <div class="nav-item" :class="{active:navActive == 0}" @click="navChange(0)" >分单</div>
                <div class="nav-item" :class="{active:navActive == 1}" @click="navChange(1)">分单历史查询</div>
            </div>
            <div class="splitOrder-container-main">
                <div style="width: 100%;" :class="{ 'no-pointer-events': state == 2 }" >
                <el-table
                     ref="multipleTableClinicRoom"
                    :data="tableData"
                    header-row-class-name="tableHeaderRowClassName"
                    @selection-change="selectTableItem"
                >   
                   <el-table-column type="selection"   min-width="5%" v-if="navActive == 0"> </el-table-column>
                    <el-table-column prop="goodsName" label="商品名称" min-width="25%" align="center"> 
                        <template #default="scope">
                                <div class="table-cell">
                                    <div class="table-spe" v-if="scope.row.isPackage"></div>
                                    <span>{{ scope.row.goodsName }}</span>
                                </div>
                        </template>
                    </el-table-column>
                    <el-table-column  label="数量(单位)" min-width="15%" align="center">
                        <template #default="scope">{{ scope.row.orderQty }}{{ scope.row.uomName }}</template>
                    </el-table-column>
                    <el-table-column  label="单价" min-width="15%" align="center">
                        <template #default="scope">{{ scope.row.salePrice }}</template>
                    </el-table-column>
                    <el-table-column prop="realAmt" label="收款金额" min-width="15%" align="center"> </el-table-column>
                    <el-table-column prop="splitOrderUser" label="操作人" min-width="15%" align="center" v-if="navActive == 1"> </el-table-column>
                    <el-table-column label="分单时间" min-width="15%"  align="center" v-if="navActive == 1">
                        <template #default="scope">{{ valiTimeSpe(scope.row.splitOrderTime) }}</template>
                    </el-table-column>
                    <el-table-column prop="splitOrderType" label="分单类型" min-width="15%" align="center" v-if="navActive == 1"> </el-table-column>
                    <el-table-column prop="sourceRoomName" label="原桌台" min-width="15%" align="center" v-if="navActive == 1"> </el-table-column>
                    <el-table-column prop="targetRoomName" label="目标桌台" min-width="15%" align="center" v-if="navActive == 1"> </el-table-column>
                    <el-table-column prop="orderUser" label="下单人" min-width="15%" align="center" v-if="navActive == 0">
                        <template #default="scope">{{ scope.row.orderUser }}</template>
                    </el-table-column>
                    <el-table-column label="下单时间" min-width="15%"  align="center" v-if="navActive == 0">
                        <template #default="scope">{{ valiTimeSpe(scope.row.orderTime) }}</template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" min-width="10%" align="center" v-if="navActive == 0">
                        <template #default="scope"><span style="color:#FF3333 ;">{{ scope.row.state }}</span></template>
                    </el-table-column>
                    <el-table-column  label="买单人" min-width="15%" align="center" v-if="navActive == 0 " >
                        <template #default="scope">{{ scope.row.payUser?scope.row.payUser:'--'}}</template>
                    </el-table-column>
                    <!-- <el-table-column  label="赠送人" min-width="15%" align="center" v-if="navActive == 0">
                        <template #default="scope">{{ scope.row.giftUser?scope.row.giftUser:'--'}}</template>
                    </el-table-column> -->
                    <el-table-column label="结账时间" min-width="15%"  align="center" v-if="navActive == 0">
                        <template #default="scope">{{ valiTimeSpe(scope.row.payTime)?valiTimeSpe(scope.row.payTime):'--' }}</template>
                    </el-table-column>
                    <el-table-column label="分单数量" min-width="20%"  align="center" v-if="navActive == 0">
                        <template #default="scope">
                            <el-input-number
                                v-if="scope.row.itemQty != 0"
                                v-model="scope.row.itemQty"
                                :min="1"
                                :max="scope.row.orderQty"
                                @change="changeNum(scope.row.itemCode,$event)"
                            ></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
                <div class="main-opera" v-show="navActive == 0" @click="openSplit">分单</div>
            </div>
            <div class="splitOrder-container-footer">富德快Saas智能收银软件</div>
        </div>
    </div>
    <SplitTableSelect v-model="splitShow" :state="state" @cancel="splitShow = false" :detail="splitForm.detail" :sourceRoomName="tableInfo.roomName" :sourceRoomCode="splitForm.sourceRoomCode"></SplitTableSelect>
</template>
  
<script setup>
import ls from '@/lib/ls'
import Api from '@/api'
import { formatNumber,valiTime,valiTimeSpe } from '@/lib/util.js'
import SplitTableSelect from './SplitTableSelect.vue'
import { ElNotification } from 'element-plus'
const route = useRoute()
const router = useRouter()
const state = route.query.state
const payBatchCode = route.query.payBatchCode
const tableInfo = ls.get('TABLE_INFO')
console.log(state,tableInfo);

const multipleTableClinicRoom = ref()

const selectable = (e)=>{
    return  false
}
// table表格选中
const selectTableItem = (e)=>{
    console.log(e);
    splitForm.value.detail = e.map(item => {
        return {
            itemCode: item.itemCode,
            itemQty:item.itemQty,
            itemName:item.goodsName
        };
    });
    console.log(splitForm.value.detail);
}
const changeNum = (itemCode,e)=>{
    if(splitForm.value.detail[0]){
        let Index = splitForm.value.detail.findIndex(item=>item.itemCode == itemCode)
        splitForm.value.detail[Index].itemQty = e
    }
   
    let Index1 = tableData.value.findIndex(item=>item.itemCode == itemCode)

    tableData.value[Index1].itemQty = e
    console.log(tableData.value);
    console.log(splitForm.value.detail);
}
const navActive = ref(0)
const tableData = ref([])
const splitShow = ref(false)
// 分单操作
const splitForm = ref({
    sourceRoomCode:tableInfo.roomCode,
    targetRoomCode:'',
    detail:[]
})
// 打开分单弹窗
const openSplit = ()=>{
    if(splitForm.value.detail[0]){
        splitShow.value = true
    }else{
        ElNotification({
            title: '提示',
            message: '请先选择要分单的商品',
            type: 'warning',
        })
    }
     
}
// nav切换
const navChange =(k)=>{
    navActive.value = k
    if(k== 0){
        getTableList()
    }else{
        getSplitOrderRecordList()
    }
}
// 获取数据
const getTableList = ()=>{
    Api.Common.PcObjProcess.Do({"functionName":"GetPayBatchGoodsList","contentData":{"consumeCode":tableInfo.consumeCode,"state":state,'payBatchCode':payBatchCode}})
        .then(res=>{
            console.log(res);
            console.log(res.result[0].consumeList);
            tableData.value = res.result[0].consumeList
            tableData.value.forEach(item => {
                item.itemQty = item.orderQty
            });
            
            if (multipleTableClinicRoom.value) {
             multipleTableClinicRoom.value.toggleAllSelection();  // 调用 toggleAllSelection 方法
             }
            console.log(tableData.value);
        })
}
// 获取分单数据 
const getSplitOrderRecordList = ()=>{
    Api.Common.PcObjProcess.Do({"functionName":"GetSplitOrderRecordList","contentData":{"roomCode":tableInfo.roomCode,"consumeCode":tableInfo.consumeCode}})
        .then(res=>{
            console.log(res);
            tableData.value = res.result
        })
}
getTableList()
</script>
  
<style scoped lang="scss">
@import url('@/styles/com_style_input.css');
    .splitOrder{
        height: 100%;
        background: #F2F2F2;
       .splitOrder-container{
            width: 1200px;
            margin: 0 auto;
          .splitOrder-container-top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 0 32px 0;
             .top-left{
                display: flex;
                align-items: center;
                .top-left-title{
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #212121;
                    line-height: 24px;
                    margin-right: 100px;
                }
                .top-left-value{
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #212121;
                    line-height: 18px;
                    margin-right: 100px;
                }
             }
             .top-right{
                width: 100px;
                height: 48px;
                background: #CCCCCC;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #212121;
                line-height: 48px;
                text-align: center;
                cursor: pointer;
             }
          }
          .splitOrder-container-nav{
                display: flex;
                align-items: center;
                padding-bottom: 20px;
             .nav-item{
                width: 240px;
                height: 60px;
                background: #FFFFFF;
                border-radius: 8px;
                border: 1px solid #E6E6E6;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 60px;
                text-align: center;
                cursor: pointer;
                margin-right: 20px;
                &.active{
                    background: #FFD400; 
                    color: #212121;
                }
             }
          }
          .splitOrder-container-main{
                width: 1200px;
                height: 750px;
                background: #FFFFFF;
                border-radius: 8px;
                position: relative;
                padding: 20px;
                overflow-y: auto;
                .main-opera{
                    position: absolute;
                    right:20px;
                    bottom:20px;
                    width: 120px;
                    height: 48px;
                    background: #FFE566;
                    border-radius: 8px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 18px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                }
                ::v-deep(.el-input-number){
                    width: 112px;
                }
                ::v-deep(.el-input-number__increase.is-disabled){
                    color: #212121;
                    background-color: #FFFFFF;
                }
                ::v-deep(.el-input-number__decrease.is-disabled){
                    color: #212121;
                    background-color: #FFFFFF;
                }
                ::v-deep(.el-table){
                    height: 650px;
                }
                ::v-deep(.tableHeaderRowClassName th){
                    height: 48px;
                    background: #F9F9F9;
                }
                ::v-deep(.el-table td.el-table__cell){
                    height: 46px;
                    border-bottom: none;
                }
                ::v-deep(.el-table__inner-wrapper:before ){
                    display: none;
                }
                ::v-deep(.el-table td.el-table__cell div){
                    // padding: 0;
                }
          }
          .splitOrder-container-footer{
                padding-top: 42px;
                transform: translateX(-294px);
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 12px;
                color: #999999;
                line-height: 12px;
          }
       } 
    }
    ::v-deep(.el-checkbox__inner){
        width:20px;
        height:20px;
        border-color:#666666;
      }
      ::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner ){
        background:#ffffff;
        border-color:#ff6a00;
      }
      ::v-deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner ){
        background:#ffffff;
        border-color:#666666;
      }
      ::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner:after ){
        border-color:#ff6a00;
        transform: rotate(45deg) scaleY(1);
        left:8px;
        top:4px;
      }
      .no-pointer-events {
         pointer-events: none !important;  /* 禁用交互 */
        }
</style>
  